*{
    font: 13px/23px 'PingFang SC',Arial,
    'Microsoft YaHei',sans-serif;
}


/* ***头条横栏*** */
#top-bar{
    height: 60px;
}
/* 头条框（左） */
.left-top{
    height: 60px;
    padding-left: 24px;
    font-size: 13px;
    font-size: 13px;
    line-height: 60px;
}
.left-top > a{
    margin-right: 28px;
    color: #222;
}
.left-top > a:hover{
    color: #315efb;
}

/* 头条框（右） */
.right-top{
    height: 60px;
    padding-right: 24px;
    font-size: 13px;
    font-size: 13px;
    line-height: 60px;
}
.right-top > a{
    color: #f63051;
}
.right-top > a:hover{
    color: #315efb;
}
.right-top > .setting{
    color: #222;
    margin-left: 32px;
    cursor: pointer;
}
/* 这里对设置的hover用JS完成 （记得改颜色）*/
/* 同时，这里还有个display：none的弹出块 */
/* 也要用JS更改 */
.right-top > .set-block{
    display: none;
    z-index: 99;
    width: 84px;
    position: absolute;
    padding: 8px 0;
    right: 75px;
    top: 48px;   
    border-radius: 12px;
}
.right-top > .set-block > div{
    text-align: center;
    padding: 3px 0;
    cursor: pointer;
}
.right-top > .set-block > div:hover{
    color: #315efb;
}
/* JS更改位置标识 */

/* 登录的样式 */
.right-top > button{
    color: #222;
    margin-left: 32px;
    background-color: #4e71f2;
    border-radius: 6px;
    border: none;
    color: white;
    height: 24px;
    width: 48px;
}
/* ****头条横栏**** */



/* 中间的大图 */
.hot{
    width: 654px;
    height: 122px;
    margin: 0 auto;
    position: relative;
}
.hot > a > img{
    display: block;
    position: absolute;
    width: 270px;
    height: 129px;
    left: calc(50% - 130px);
    top: calc(50% - 80px);

}

/* 搜索框 */
#search{
    width: 654px;
    height: 44px;
    margin: 0 auto;
    position: relative;
}
#search > .search-border{
    height: 40px;
    width: 544px;
    /* border: 2px solid #c4c7ce; */
    border-bottom-left-radius: 10px;
    border-top-left-radius: 10px;
    border-right: none;
    text-indent: 1em;
    font-size: 16px;
}
#search > .search-button{
    height: 44px;
    width: 108px;
    color: white;
    background-color: #4e6ef2;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    border: none;
    font-size: 17px;
    cursor: pointer;
}
#search > .camera{
    color: #9a9a9a;
    position: absolute;
    font-size: 20px;
    left: 510px;
    top: 12px;
    cursor: pointer;
}

/* 给搜索框加上各种hover效果 */
#search > .search-button:hover{
    background-color: #4662d9;
}
#search > .camera:hover{
    color: #4e6ef2;
}
/* 此处为了实现聚焦是的颜色改变，要用到JS */
/* 给搜索框加上各种hover效果 */

/* 百度热榜的横条 */
#hot-bar{
    height: 20px;
    padding-top: 50px;
    width: 654px;
    margin: 0 auto;
    padding-bottom: 12px;
}
#hot-bar > .hot{
    height: 100%;
    line-height: 20px;
    font-size: 14px;
    width: auto;
}
#hot-bar > .change{
    font-size: 14px;
    color: #9195a3;
    cursor: pointer;
}
#hot-bar > .change:hover{
    color: #4d68e0;
}

/* 热榜下面的新闻 */
#news{
    width: 654px;
    height: 102px;
    margin: 0 auto;
}
#news > div{
    width: 50%;
    height: 100%;
}
#news a{
    display: block;
    width: 268px;
    height: 34px;
}
#news a > span{
    font-size: 14px;
    line-height: 34px;
}
#news i{
    line-height: 20px;
    display: inline-block;
    background-position: center;
    margin-right: 6px;
    padding-right: 7px;
    padding-left: 7px;
    background-image: url(https://dss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/hot_search/top_4@1x-8cffd4622f.png);
    color: #9195a3;
}
/* 对三个特殊的序号再加样式 */
#news i.fir{
    color: white;
    background-image: url(https://dss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/hot_search/top_1@1x-d1e660cf3b.png);
}
#news i.sec{
    color: white;
    background-image: url(https://dss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/hot_search/top_2@1x-50e9c7fdf4.png);
}
#news i.thi{
    color: white;
    background-image: url(https://dss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/hot_search/top_3@1x-676616abe1.png);
}
#news img{
    vertical-align: -2px;
}
/* 在这里存在下划线显示问题：
当鼠标移到a标签上，但是是span标签
出现下划线，hover搞不定，必须用JS */
#news span:hover{
    text-decoration: underline;
    color: #315efb;
}
/* 算了，就用hover将就一下 */


/* 二维码 */
#twodim-code{
    width: 45px;
    height: 45px;
    position: fixed;
    bottom: 64px;
    right: 24px;
    border-radius: 50%;
    background-color: #f5f5f6;
    cursor: pointer;
}
/* 这里的before纯粹为了JS里把display改了的服务而存在 */
/* 很重要：这是看来百度HTML结构学到的（很强，真的没想到这个办法） */
#twodim-code::before{
    position: absolute;
    top: 0;
    left: -20px;
    content: '';
    width: 44px;
    height: 44px;
}
#twodim-code > .iconfont{
    line-height: 45px;
    text-align: center;
    font-size: 22px;
    color: #575454;
}


/* 这个弹出块用display：none来表示 */
/* 这个之后的显示功能得用JS来完成 */
#twodim-code > .extra-block{
    display: none;
    z-index: 99;
    position: absolute;
    right: 56px;
    bottom: 0;
    width: 289px;
    height: 107px;
    background-color: white;
    border-radius: 8px;
    cursor: default;
}
.extra-block > .scan-log{
    margin-left: 16px;
    margin-top: 28px;
    font-size: 18px;
}
.extra-block > .descrip{
    margin-left: 16px;
    font-size: 14px;
    color: #9195a3;
}
.extra-block > img{
    position: absolute;
    width: 75px;
    height: 75px;
    left: 200px;
    top: 15px;
}
/* 显示用JS完成（同时别忘了给小球二维码改颜色） */


/* 最下面的说明栏 */
#bottom-bar{
    position: fixed;
    left: 0;
    bottom: 0;
    height: 40px;
    width: 100%;
    background-color: #fafafa;
}
/* 对整个文字的样式设置 */
#bottom-bar a, #bottom-bar span{
    font-size: 12px;
    color: #9195a3;
    line-height: 40px;
}
#bottom-bar a:hover{
    color: #222;
}
/* 左边的说明栏 */
#bottom-bar > .bar-left{
    margin-left: 15px;
}
#bottom-bar > .bar-left > a{
    margin-left: 16px;
}
/* 右边的说明栏 */
#bottom-bar > .bar-right{
    margin-right: 15px;
}
#bottom-bar > .bar-right > a, #bottom-bar > .bar-right > span{
    margin-right: 16px;
    color: #bbb;
}
#bottom-bar > .bar-right > a:hover{
    color: #222;
}